<template>
    <div class="app-container">
        <el-form v-show="showSearch" ref="searchParams" :model="searchParams" size="small" :inline="true"
            label-width="90px">
            <el-form-item label="客户姓名：">
                <el-input v-model="searchParams.clientName" placeholder="客户姓名" clearable style="width: 150px" />
            </el-form-item>
            <el-form-item label="手机号码：">
                <el-input v-model="searchParams.clientPhoneNum" placeholder="客户手机号码" clearable style="width: 150px" />
            </el-form-item>
            <el-form-item label="身份证号：">
                <el-input v-model="searchParams.clientIdNum" placeholder="客户身份证号" clearable style="width: 150px" />
            </el-form-item>
            <el-form-item label="催收人员姓名：" label-width="auto">
                <el-input v-model="searchParams.collectName" placeholder="渠道名称" clearable style="width: 200px" />
            </el-form-item>
            <el-form-item label="贷款状态：">
                <el-select v-model="searchParams.loanStatus" placeholder="全部" clearable style="width: 150px">
                    <!-- 字典状态，dict.type.你添加进字典的类型 -->
                    <el-option v-for="dict in dict.type.loan_info_applicant_status"
                        v-if="dict.value>=12 && dict.value!=15" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                </el-select>
            </el-form-item>

            <el-form-item label="催收状态：">
                <el-select v-model="searchParams.collectStatus" placeholder="全部" clearable style="width: 150px">
                    <!-- 字典状态，dict.type.你添加进字典的类型 -->
                    <el-option v-for="dict in dict.type.bill_periods_payment_status" :key="dict.value"
                        :label="dict.label" :value="dict.value" />
                </el-select>
            </el-form-item>

            <el-form-item label="委派催收时间：" label-width="auto">
                <el-date-picker v-model="searchParams.writeTime" type="datetimerange" align="right"
                    start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="催收完成：" label-width="auto">
                <el-date-picker v-model="searchParams.collectFinishTime" type="datetimerange" align="right"
                    start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <div style="margin-right: 50px;">
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </div>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button v-hasPermi="['system:post:export']" type="warning" plain icon="el-icon-download" size="mini"
                    @click="handleExport">导出</el-button>
            </el-col>
            <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
        </el-row>
        <!-- data=你后台查出的数据 -->
        <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="40" align="center" />
            <el-table-column label="借款订单编号" align="center" prop="orderNum" />
            <el-table-column label="客户姓名" align="center" prop="clientName" />
            <el-table-column label="催收状态" align="center" prop="applicantStatus">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.loan_info_applicant_status" :value="scope.row.applicantStatus" />
                </template>
            </el-table-column>

            <el-table-column label="最新催收记录" align="center" prop="collectionLog" />
            <el-table-column label="委派催收时间" align="center" prop="writeTime">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.writeTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="催收人员" align="center" prop="collector.nickName" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button v-hasPermi="['system:post:edit']" size="mini" type="text" icon="el-icon-more"
                        @click="handleDetail(scope.row)">查看</el-button>
                    <el-button v-hasPermi="['system:post:remove']" size="mini" type="text" icon="el-icon-edit"
                        @click="addRecord(scope.row)">添加记录</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList" />

        <el-dialog title="添加催收记录" :visible.sync="addDialogStatus" width="600px" top="30vh" append-to-body>
            <el-form label-width="80px">
                <el-row>
                    <el-col :span="24">
                        <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="addTextarea">
                        </el-input>
                    </el-col>
                </el-row>
                <br /><br />
                <el-divider></el-divider>
                <el-row>
                    <el-col>
                        <el-button style="position:absolute; left: 250px;" v-hasPermi="['system:post:remove']"
                            size="mini" type="primary" icon="el-icon-edit" @click="saveRecord">确认</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
// 导入api
import { listCollections, saveCollectRecord, searchCollectList } from '../../../api/collect/index'
import Dict from '../../../utils/dict/Dict'
import { formatDate } from '../../../utils'
export default {
    // 字典导入
    dicts: ['order_status', 'source_status', 'loan_info_applicant_status', 'bill_periods_payment_status'],
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 岗位表格数据
            dataList: [],
            restColoums: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            addDialogStatus: false,
            addTextarea: '',
            // 日期范围
            dateRange: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,

                customName: undefined,
                customPhoneNum: undefined,
                customIdNum: undefined,
                channel: undefined,
                appliedStatus: undefined,
            },
            // 表单参数
            addRecordInfo: {
                actualPayment: '',
                actualPaymentTime: '',
                writeTime: '',
                collectionLog: '',
                operatorId: 0,
                loanInfoId: 0,
                collectFinishTime: ''
            },
            data: {
                ids: this.ids
            },
            searchParams: {
                clientName: undefined,
                clientPhoneNum: undefined,
                clientIdNum: undefined,
                collectName: undefined,
                loanStatus: undefined,
                collectStatus: undefined,
                writeTime: [],
                collectFinishTime: []
            }
        }
    },
    created() {
        this.getList()
    },
    watch: {
        ids(newVal) {
            this.data.ids = newVal;
        },
        addTextarea(newVal){
            this.addRecordInfo.collectionLog = newVal;
        }
    },

    methods: {
        getList() {
            this.loading = true
            listCollections(this.queryParams.pageNum, this.queryParams.pageSize).then(response => {
                console.log(response)
                this.dataList = response.rows
                this.total = response.total
                this.loading = false
            })
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [];
            this.resetForm("searchParams");
        },
        handleQuery() {
            searchCollectList(this.searchParams).then(res => {
                console.log(res)
                if (res.code == 200) {
                    this.loading = true
                    this.dataList = res.data
                    this.loading = false
                } else {
                    this.$notify({
                        message: res.msg,
                        type: 'success'
                    });
                }
            }).catch();
        },
        // 查看进件详情
        handleDetail(row) {
            console.log(row);
            const loanInfoId = row.loanInfoId;
            this.$router.push({ path: '/collectLoanList/collectDetail', query: { loanInfoId: loanInfoId, userId: row.collector.userId, clientId: row.clientId, billId: row.billId } });
        },
        reset() {
            this.form = {
                code: 1,
                status: '0'
            }
            this.resetForm('form')
        },
        handleExport() {
            console.log(this.exportParams)
            this.download('collect/exportChosen', this.data, `催收信息列表_${new Date().getTime()}.xlsx`)
        },
        addRecord(row) {
            this.addDialogStatus = true;
            this.addRecordInfo.actualPayment = 0;
            this.addRecordInfo.actualPaymentTime = null;
            this.addRecordInfo.writeTime = formatDate(new Date());
            this.addRecordInfo.collectionLog = this.addTextarea;
            this.addRecordInfo.operatorId = row.collector.userId;
            this.addRecordInfo.loanInfoId = row.loanInfoId;
            this.addRecordInfo.collectFinishTime = formatDate(new Date())
            console.log(this.addRecordInfo)
        },
        saveRecord() {
            saveCollectRecord(this.addRecordInfo).then(res => {
                console.log(res)
                if (res.code == 200) {
                    this.loading = true
                    this.$notify({
                        message: res.msg,
                        type: 'success'
                    });
                    this.getList();
                    this.loading = false
                } else {
                    this.$notify({
                        message: res.msg,
                        type: 'warning'
                    });
                }
            }).catch();
            this.addDialogStatus = false;
            this.addRecordInfo.actualPayment = 0;
            this.addRecordInfo.actualPaymentTime = null;
            this.addRecordInfo.writeTime = null;
            this.addRecordInfo.collectionLog = null;
            this.addRecordInfo.operatorId = null;
            this.addRecordInfo.loanInfoId = null;
            this.addRecordInfo.collectFinishTime = null;
        },
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.billId)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        }
    }

}

</script>

